<template>
	<div>
		<ul class="list">
			<li @click="saleslip" :class="{'light':comA==true}">销售单</li>
			<li @click="returnorder" :class="{'light':comB==true}">退货单</li>
			<li @click="receipt" :class="{'light':comC==true}">收款单</li>
		</ul>
		<saleslip v-show="comA"></saleslip>
		<returnorder v-show="comB"></returnorder>
		<receipt v-show="comC"></receipt>
	</div>
</template>

<script>
	import saleslip from "./saleslip.vue"
	import returnorder from "./returnorder.vue"
	import receipt from "./receipt.vue"
	export default{
		name:"tabchange",
		components:{
			saleslip,
			returnorder,
			receipt
		},
		data(){
			return{
				comA:true,
				comB:false,
				comC:false
			}
		},
		methods:{
			saleslip(){
				this.comA=true
				this.comB=false
				this.comC=false
			},
			returnorder(){
				this.comA=false
				this.comB=true
				this.comC=false
			},
			receipt(){
				this.comA=false
				this.comB=false
				this.comC=true
			}
		},
		
	}
</script>

<style scoped="scoped">
	ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	.list{
		display:flex;
		width:100%;
		padding-top:5px;
		padding-bottom:5px;
	}
	.list li{
		width:50%;
		text-align: center;
		border-bottom:1px solid lightblue;
	}
	.light{
		background-color: lightblue;
		color:white;
	}
</style>
